<template>
  <svg v-if="type === 'symbol'" class="iconsymbol icon" aria-hidden="true" :style="{ color: color, width: size + 'rpx', height: size + 'rpx' }" @click="_onClick">
    <use :xlink:href="`#${icon}`"></use>
  </svg>
  <text v-else :style="{ color: color, 'font-size': size + 'rpx' }" class="icon" :class="icon" @click="_onClick"></text>
</template>

<script>
/**
 * Icons 图标
 * @description 用于展示 icons 图标
 * @property {Number} size 图标大小
 * @property {String} color 图标颜色
 * @event {Function} click 点击 Icon 触发事件
 */
export default {
  name: 'dxIcons',
  props: {
    type: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#333'
    },
    size: {
      type: [Number, String],
      default: 30
    },
    icon: {
      type: String,
      default: ''
    }
  },
  data() {
    return {};
  },
  methods: {
    _onClick() {
      this.$emit('click');
    }
  }
};
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'iconfont'; /* Project id 3693362 */
  src: url('./fonts/iconfont.woff2') format('woff2'), url('./fonts/iconfont.woff') format('woff'), url('./fonts/iconfont.ttf') format('truetype');
}

.icon {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
}

.icon-wangdian:before {
  content: '\e890';
}

.icon-wode:before {
  content: '\e600';
}

.icon-tuichu:before {
  content: '\e622';
}

.icon-yonghu:before {
  content: '\e639';
}

.icon-shezhi:before {
  content: '\e650';
}

.icon-jinri:before {
  content: '\e619';
}

.icon-gerenzijin:before {
  content: '\e659';
}

.icon-weihu:before {
  content: '\e69f';
}

.icon-rili:before {
  content: '\e60a';
}

.icon-dingdan:before {
  content: '\e6e5';
}

.icon-shuju:before {
  content: '\e614';
}

.icon-mimaguanli:before {
  content: '\e61e';
}

.icon-benyue:before {
  content: '\e64e';
}

.icon-xiugai:before {
  content: '\e60f';
}

.icon-shouye:before {
  content: '\e65a';
}

.icon-kefu:before {
  content: '\e62d';
}

.icon-tanhao:before {
  content: '\e644';
}

.icon-mima:before {
  content: '\e649';
}

.icon-shebei:before {
  content: '\e62a';
}

.icon-qingli:before {
  content: '\e60d';
}

.icon-mima1:before {
  content: '\e620';
}

.icon-yanjing-kai:before {
  content: '\e6cc';
}

.icon-yanjing-guan:before {
  content: '\e6cd';
}

.icon-yonghuguanli:before {
  content: '\e605';
}

.icon-quanjing:before {
  content: '\e769';
}

.icon-tixian:before {
  content: '\ed1f';
}

.icon-shouji:before {
  content: '\e625';
}

.icon-daohang:before {
  content: '\e65d';
}

.icon-shujuwd:before {
  content: '\e6c2';
}
</style>
